Windows下React Native的Android环境部署及布局示例

搭建基础环境

以上配置不是必须，可自行选择适合自己的环境，部分安装过程可能会涉及到翻墙，需要配置代理

配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解，也会提一下Android Studio自带的模拟器的一些注意点，使用真机的朋友可跳过这段。 genymotion的安装有2种模式，一种是带有Oracle VM VirtualBox虚拟机，另外一种是纯净版，genymotion的运行依赖VirtualBox虚拟机。

选择下载android6.0-API 23模拟器

（如果无法显示API列表，请配置代理Settings->NetWork->Use HTTP Proxy） 启动模拟器，可能会有部分人卡在android启动界面上面，无法进入

genymotion的运行基于X86的架构，比起arm，X86的性能更流畅。我们需要使用X86架构的话，还需要安装HAXM。

1、打开SDK Manager->Extras->Intel x86 Emulator Accelerator，安装即可，如果没有任何东西显示，还是代理问题，Tools->Options->Proxy Settings 2、进入C:\Users\用户\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager 安装intelhaxm-android.exe，安装出错，请参考这里

至此我们就能进入模拟器界面

Android Studio 如果想使用android studio自带模拟器，可以打开AVD Manager->Create Virtual Device->选择自己需要的android版本 值得注意的是，模拟器默认选择X86架构，如果你不喜欢，你需要自己手动改成arm架构

NVM 这里选择用NVM来控制node版本，如果你已经装过node4.0以上的版本，就跳过这里。 安装方式和使用文档，github上面讲的很清楚，这里说下代理的配置，其实也就是npm的代理，配置全局代理

React-native初始化 心理默默祈祷以下命令千万不要错误。。。

果然。。。好吧，这里分享下自己遇到的一些问题

进入C:\Users\用户\AppData\.gradle，打开gradle.properties（不存在就新建一个），修改

总算是把android应用程序跑起来了，真累人啊

布局 这里以三种经典布局来讲解react-native布局概念，主要以flexbox为主，react native中有两个基本元素< View >与< Text >，分别类似于web端div和span，用于布局和修饰。需要注意的是，react native不是所有的CSS属性都支持，这里有react native所支持的CSS属性。

准备工作 在JSX中写样式还是有点不习惯，这里使用react-native-css模块来编写样式，安装、使用过程如下：

布局讲解 左右布局 由于是横向布局，我们需要flex-direction: row（默认纵向布局），左右以1:1方式排版，就都需要flex:1，布局容器也需要加上flex:1，表示为伸缩容器。由于react native没有br标签，需要换行只能将换行符插入。

样式表：

页面结构：

左中右布局 左右定宽，中间占满。

样式表：

页面结构：

上中下布局 类似新闻和门户APP的布局，上下贴边，中间为内容区。

样式表：

页面结构：

综合布局 简单模拟网易新闻APP布局：

我们可以简单看看APP布局方式，总体来说就是上中下的布局方式，我们可以初步先编写外部结构 页面结构：

样式表：

大致结构算是搭建完毕，开始完善头部展示（偷懒、不想切图，就用个title代替就好啦~~~） 页面结构：

样式表：

头部内容完成之后，就完善内容区域的导航条，但是react-native并没有提供ul、li标签（也许以后有），这个是要View来代替ul，Text代替li，代码和数据如下： 页面结构：

样式表：

新闻主题方面可以划分为左右两栏，左栏固定宽，右栏占满，由于react-native不支持overflow:scroll属性，这里会用到一个ScrollView的滚动条组件来展示新闻概述，篇幅可能较长，底部就不再编写了（就是懒~~），大家各自完善吧，以下是全部的布局代码和样式。

页面结构：

样式表：